<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的签名</title>
    <script src="js/vue.min.js"></script>
    <script src="js/signature_pad.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="layer/layui.all.js"></script>
    <link rel="stylesheet" href="layer/css/layui.css">
</head>
<body>


<div id="app">
    <div style="text-align: center;padding: 20px 0;">


        <img :src="signSrc" width="600" height="285" style="background: #f2f2f2;border-radius: 8px;
            border: 2px solid darkslategray;
            box-shadow: darkgrey 5px 5px 15px 5px;
            background-color: #FFFFFF;"/>
    </div>
    <div style="text-align: center;">
        <button
                :class="['layui-btn','layui-btn-lg',{'layui-btn-normal':showFlag},{'layui-btn-primary':!showFlag}]"
                v-on:click="showSignPad">{{signPadBtnName}}
        </button>
    </div>
</div>


<script>


    var task;

    var app = new Vue({
        el: "#app",
        data: {
            signSrc: '',
            scry: '',
            scrymc: '',
            orgCode: '',
            userName: '',
            showFlag: false
        },
        created: function () {
            var url = location.search;
            url = url.substr(1);
            var paramsString = url.split("&");
            var that = this;
            for (var i = 0; i < paramsString.length; i++) {
                var key = paramsString[i].split("=")[0];
                var value = paramsString[i].split("=")[1];
                if (key == 'scry') {
                    this.scry = value;
                }
                if (key == 'scrymc') {
                    this.scrymc = decodeURI(value);
                }
                if (key == 'orgCode') {
                    this.orgCode = value;
                }
                if (key == 'userName') {
                    this.userName = value;
                }
            }
            $.post("/cjg/login", {yhzh: this.userName, yhm: this.scrymc}, function (res) {
                that.clientId = res.clientId;
                if (res.signSrc) {
                    that.signSrc = res.signSrc;
                }
                else {
                    that.signSrc = 'images/noSign.png';
                }
            });
        },
        methods: {
            showSignPad: function () {
                var that = this;
                if (!this.showFlag) {
                    var msg = {};
                    msg.type = "showMySign";
                    msg.yhzh = app.userName;
                    msg.yhm = app.scrymc;
                    var data = {msg: JSON.stringify(msg)};
                    $.post("/cjg/postOut", data, function (res) {
                        that.showFlag = true;
                        task = setInterval(function () {
                            $.post("/cjg/loadMySign", {}, function (res) {
                                if (res.result == 'new') {
                                    that.signSrc = res.src;
                                    that.showFlag = false;
                                    clearInterval(task);
                                }
                            });
                        }, 2000);
                    });

                }
                else {
                    var msg = {};
                    msg.type = "goHome";
                    var data = {msg: JSON.stringify(msg)};
                    $.post("/cjg/postOut", data, function (res) {
                        that.showFlag = false;
                        clearInterval(task);
                    });
                }
            }
        },
        computed: {
            signPadBtnName: function () {
                if (this.showFlag) {
                    return "取消签名";
                }
                else {
                    return "开始签名";
                }
            }
        }
    });

    window.onunload = function () {
        var msg = {};
        msg.type = "goHome";
        var data = {msg: JSON.stringify(msg)};
        $.post("/cjg/postOut", data, function (res) {
            clearInterval(task);
        });
    };


</script>

</body>
</html>